<template>
  <div class="panel-common">
    <div class="panel-common_hd">
      <span>
        <slot name="title">
          {{ title }}
        </slot></span
      >
      <div class="panel-common_hd-extra">
        <slot name="title-extra">
          <span @click.stop="emits('more')">more</span>
          <span @click.stop="emits('mini')">mini</span>
        </slot>
      </div>
    </div>
    <div class="panel-common_bd">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['more', 'mini'])
</script>

<style scoped lang="less">
.panel-common {
  background-color: #fff;
  outline: 1px solid #e8e8e8;
  border-radius: 4px;
  &_hd {
    padding: 5px;
    font-size: 16px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-extra {
      display: flex;
      align-items: center;
      & > span {
        margin: 0 5px;
        padding: 0.25rem;
      }
    }
  }
  &_bd {
    height: calc(100% - 40px);
  }
}
</style>
